<template>
	<view class="u-page">
		<u-subsection :list="catelist" :current="current" @change="sectionChange"></u-subsection>
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
				<view class="orderDetail" v-if="item.delivery_day">
					<view class="top">
						<text>订单号：{{item.order_no}}</text>
						<text class="status tag-danger" v-if="!item.receive_time">
							待配送
						</text>
						<text class="status tag-success" v-else>
							已配送
						</text>
					</view>
					<view class="line">
						<text v-if="item.customer.customer_type=='company'">下单客户：{{item.customer.name}}</text>
						<text v-if="item.customer.customer_type=='family'">下单客户：{{item.customer.address}}</text>
					</view>
					<view class="line">
						<text>下单时间：{{item.createtime}}</text>
						<text>下单方式：{{item.order_type | parseType}}</text>
					</view>
					<view class="line">
						<text>商品：{{item.goods.name}}</text>
						<text>数量：{{item.number}}{{item.spec.unit}}<block v-if="item.refuse_number">，退{{item.refuse_number}}{{item.spec.unit}}</block></text>
					</view>
					<view class="line">
						<text>合计：￥{{item.total_money}}</text>
						<text>支付方式：{{item.pay_type}}</text>
					</view>
					<view class="line" v-if="item.receive_time">配送日期：{{item.receive_time | parseTime}}</view>
				</view>
				<view class="orderDetail" v-if="item.point">
					<view class="top">
						<text>订单号：{{item.order_no}}</text>
						<text class="status tag-danger" v-if="item.status=='apply'">
							申请中
						</text>
						<text class="status tag-info" v-if="item.status=='confirm'">
							已确认
						</text>
						<text class="status tag-success" v-if="item.status=='receive'">
							已完成
						</text>
						<text class="status tag-fail" v-if="item.status=='cancel'">
							已取消
						</text>
					</view>
					<view class="line">
						<text>下单时间：{{item.createtime}}</text>
					</view>
					<view class="line">
						<view v-if="item.customer.customer_type=='company'">下单客户：{{item.customer.name}}</view>
						<view v-if="item.customer.customer_type=='family'">下单客户：{{item.customer.address}}</view>
					</view>
					<view class="line">
						<view>联系方式：{{item.customer.contact}} - {{item.customer.mobile}}<text style="margin-left: 10rpx;" class="tag-info" @click="makePhone(item.customer.mobile)">拨打</text></view>
					</view>
					<view class="line">
						<text>提货点：{{item.point.name}}</text>
						<text>配送：{{item.delivery?'是':'否'}}</text>
					</view>
					<view class="line" v-if="item.delivery">
						<text>配送地址：{{item.address.mergename}},{{item.address.detail}} - {{item.distance.short_distance}}</text>
					</view>
					<view class="line">
						<text>商品：{{item.goods.name}}-{{item.spec.name}}</text>
						<text>数量：{{item.number}}{{item.spec.unit}}</text>
					</view>
					<view class="line">
						<text>单价：￥{{item.price}}/{{item.spec.unit}}</text>
						<text>合计：￥{{item.total_money}}</text>
					</view>
					<view class="btn-group">
						<u-button v-if="item.status=='apply'" customStyle="margin-right:10rpx;" size="small" type="primary" text="确认订单" @click="setStatus(item.id,index,'confirm')"></u-button>
						<u-button v-if="item.status=='confirm'" customStyle="margin-right:10rpx;" size="small" type="primary" text="确认收货" @click="setStatus(item.id,index,'receive')"></u-button>
						<u-button v-if="item.status=='apply'" size="small" type="error" text="取消订单" @click="setStatus(item.id,index,'cancel')"></u-button>
					</view>
				</view>
			</block>	
			<view v-if="list.length==0">
				<u-empty text="没有订单!" mode="search" marginTop="150"></u-empty>
			</view>
		</view>
		<u-tabbar value="order">
			<u-tabbar-item text="客户" name="store" icon="home-fill" @click="goStore"></u-tabbar-item>
			<u-tabbar-item text="订单" name="order" icon="file-text-fill"></u-tabbar-item>
			<u-tabbar-item text="我的" name="index" icon="account-fill" @click="goIndex"></u-tabbar-item> 
		</u-tabbar>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				customer_id:'',
				catelist:['全部','60天','30天','15天'],
				current:0,
				endData:false,
				page:1,
				list:[],		
			}
		},
		onPullDownRefresh() {
			this.list=[];
			this.page=1;
			this.endData=false;
			this.pagelist(true);
		},
		onReachBottom() {
			this.pagelist();
		},
		onLoad(e) {
			this.customer_id=e.customer_id || '';
			this.pagelist();
		},
		filters:{
			parseTime:function(data){
				if(data){
					return data.substr(0,16);
				}
			},
			parseType:function(data){
				if(data==1)return '客户主动下单';
				if(data==2)return '司机代客下单';
				if(data==3)return '系统自动下单';
			}
		},
		methods: {
			...methods,
			setStatus:function(id,index,status){
				this.$post("admin/customer/orderStatus",{
					order_id:id,
					status:status
				},true).then(res=>{
					this.list[index].status=status;
				});
			},
			makePhone:function(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				});
			},
			goIndex:function(){
				this.$redirectTo('admin/index');	
			},
			goStore:function(){
				this.$redirectTo('admin/store');
			},
			sectionChange:function(i){
				this.current=i;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("admin/customer/orderlist",{
					customer_id:this.customer_id,
					date:this.current,
					page:this.page
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
.list{
	padding: 20rpx;
	font-size: 24rpx;
	.orderDetail{
		min-height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		box-shadow: 0rpx 0rpx 20rpx #bebebe;
		padding: 20rpx;
		.top{
			display: flex;
			justify-content: space-between;
		}
		.line{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
		.btn-group{
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			margin-left: 80%;
			width: 20%;			
		}
	}
}
</style>
